<mat-tab-group [@.disabled]="true" #tabs class="ama-tab-models"
    [(selectedIndex)]="selectedTabIndex"
    (selectedTabChange)="onTabChange()"
    (selectedIndexChange)="onSelectedTabChanged($event)">
    <mat-tab class="ama-tab-model" *ngFor="let tab of currentTabs$ | async" >
        <ng-template mat-tab-label>
            <div class="ama-tab-model-body">
                <mat-icon class="ama-tab-model-icon" [attr.data-automation-id]="'model-tab-icon-'+tab.id">{{ tab.icon }}</mat-icon>
                <p [attr.data-automation-id]="'model-tab-title-'+tab.id" class="ama-tab-title">{{ tab.title }}</p>
                <div *ngIf="tab.isDirty" class="ama-tab-model-dirty" [attr.data-automation-id]="'model-tab-dirty-'+tab.id"></div>
                <button mat-icon-button [disableRipple]="true" [attr.data-automation-id]="'model-tab-close-button-'+tab.id"
                        class="ama-tab-model-close" [id]="'model-tab-close-button-'+tab.id" (click)="onRemoveTab(tab)">
                    <mat-icon class="ama-tab-model-icon-close">close</mat-icon>
                </button>
            </div>
        </ng-template>
        <ng-template matTabContent>
            <modelingsdk-model-editor #modelEditor [modelId]="tab.id" [modelType]="tab.modelType"></modelingsdk-model-editor>
        </ng-template>
    </mat-tab>
</mat-tab-group>
